<template>
  <el-table-column v-bind="{ ...columnProps }">
    <template v-if="columnProps.slot || columnProps.render" #default="scope">
      <slot
        v-if="columnProps.slot"
        :name="columnProps.slot"
        :data="scope.row"
        :index="index"
      ></slot>
      <lgSolt
        v-else
        :render="columnProps.render"
        :row="scope.row"
        :column="columnProps"
        :index="index"
      ></lgSolt>
    </template>
  </el-table-column>
</template>
<script lang="ts">
import { defineComponent, h, unref } from 'vue'
import { ElTableColumn } from 'element-plus'
import { PropType, Recordable } from '@/global'
import { ColumnProps } from '../types/tableColumn'
const lgSolt = {
  functional: true,
  props: {
    defValue: {
      type: String,
      default: '-'
    },
    row: Object as PropType<Recordable>,
    render: Function,
    column: Object as PropType<Recordable>,
    index: Number as PropType<Number>
  },
  render: (data: any) => {
    const element = data.render(unref(data.row), data.index)
    if (typeof element === 'object' && element !== null) {
      return element
    } else {
      return h('span', {}, element || data.defValue)
    }
  }
}
export default defineComponent({
  components: { ElTableColumn, lgSolt },
  props: {
    columnProps: {
      type: Object as PropType<ColumnProps>,
      default: () => ({})
    },
    index: Number as PropType<Number>
  }
})
</script>
